<template>
	<view class="Active">
		<u-toast ref="uToast"></u-toast>
		<u-modal :title="agreeList[agreeIndex].title" :show="agreeShow" @confirm="agreeShow = false;" confirmText="我已阅读">
			<view class="slot-content">
				<view class="modal_scroll">
					<u-parse :content="agreeList[agreeIndex].content"></u-parse>
				</view>
			</view>
		</u-modal>
		<u-navbar :auto-back="true" title=" " :placeholder="true" bg-color="#45B9A2" :title-style="{color: '#ffffff'}" leftIconColor="#ffffff"></u-navbar>
		<view class="active_box">
			<image class="active_bg1" src="/static/active1.png"></image>
			<image class="active_bg2" src="/static/active2.png"></image>
			<view class="active_main">
				<view class="active_title">旅游会员卡</view>
				<view class="active_sub">
					<u-divider text-size="36rpx" line-color="#05383A" text-color="#05383A" text=" 加入旅游会员 享更多福利"></u-divider>
				</view>
				<view class="active_card">
					<image class="active_card_img1" src="/static/active3.png"></image>
					<image class="active_card_img2" src="/static/active4.png"></image>
					<view class="active_card_number">NO.786789886</view>
					<view class="active_card_app">{{appName}}</view>
				</view>
				<view class="active_content">
					<view class="active_form">
						<u--form :model="form" :rules="rules" ref="uForm" :errorType="errorType"
							labelWidth="200rpx">
							<view class="active_form_input">
								<u-form-item prop="name">
									<u--input fontSize="28rpx" v-model="form.name" border="none" placeholder="请输入卡号" :placeholderStyle="{color: '#666666'}"></u--input>
								</u-form-item>
							</view>
							<view class="active_form_input">
								<u-form-item prop="pass">
									<u--input fontSize="28rpx" v-model="form.pass" border="none" placeholder="请输入对应的卡密" :placeholderStyle="{color: '#666666'}"></u--input>
								</u-form-item>
							</view>
							<view class="active_form_input">
								<u-form-item prop="true_name">
									<u--input fontSize="28rpx" v-model="form.true_name" border="none" placeholder="请输入姓名" :placeholderStyle="{color: '#666666'}"></u--input>
								</u-form-item>
							</view>
							<view class="active_form_input">
								<u-form-item prop="idcard">
									<u--input fontSize="28rpx" v-model="form.idcard" border="none" placeholder="请输入身份证号码" :placeholderStyle="{color: '#666666'}"></u--input>
								</u-form-item>
							</view>
							<view class="active_btn">
								<u-button throttleTime="1000" color="#ffd1aa" shape="circle" :customStyle="btnStyle" @click="submit" text="立即激活"></u-button>
							</view>
							<view class="flex_box flex_row_center active_agree">
								<view @click="agreeStatus = !agreeStatus;" class="flex_box active_agree_main">
									<view class="active_agree_dot"></view>
									<u-checkbox-group>
										<u-checkbox size="30rpx" :checked="agreeStatus" inactive-color="#4ac8af" activeColor="#0FBCF9" shape="circle"></u-checkbox>
									</u-checkbox-group>
									<view class="active_agree_text">阅读并同意<text @tap.stop="showAgree(0)">《会员协议》</text></view>
								</view>
							</view>
						</u--form>
					</view>
					<view class="active_know">
						<view class="flex_box flex_row_center active_know_title">
							<u-image width="40rpx" height="26rpx" src="/static/active5.png"></u-image>
							<text>激活须知</text>
							<u-image width="40rpx" height="26rpx" src="/static/active6.png"></u-image>
						</view>
						<view class="active_know_content">
							<u-parse :content="knowContent"></u-parse>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { cardIndex, cardActive } from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				form: {
					name: '',
					pass: "",
				},
				errorType: "toast",
				rules: {
					name: [{
							type: 'string',
							required: true,
							message: '请输入您的卡号',
							trigger: ['blur', 'change']
						},
					],
					pass: [{
							type: 'string',
							required: true,
							message: '请输入对应的卡密',
							trigger: ['blur', 'change']
						},
					],
					true_name: [{
						type: 'string',
						required: true,
						message: '请输入您的姓名',
						trigger: ['blur', 'change']
					 },
					],
					idcard: [{type: 'string',
						required: true,
						message: '请输入您的身份证号码',
						trigger: ['blur', 'change']
					 }],
				},
				btnStyle: {
					width: '444rpx',
					height: '84rpx',
					color: '#B95F15',
					fontWeight: 'bold'
				},
				agreeStatus: false,
				agreeIndex: 0,
				agreeShow: false,
				agreeList: [
					{
						title: "会员协议",
						content: "会员协议内容"
					},
				],
				appName: '',
				knowContent: ""
			}
		},
		onLoad() {
			that = this;
			that.appName = uni.getSystemInfoSync().appName
			that.cardIndex();
		},
		onReady() {
			that.$refs.uForm.setRules(that.rules);
		},
		methods: {
			cardIndex() {
				cardIndex({})
					.then(res => {
						that.agreeList[0].content = res.data.sksm;
						that.knowContent = res.data.activate
					})
					.catch(err => {
						uni.$u.toast(err.msg);
					});
			},
			submit() {
				console.log(that.form)
				that.$refs.uForm.validate().then(res => {
					if(!that.agreeStatus){
						uni.$u.toast('请阅读并同意会员协议');
						return;
					}
					cardActive(that.form).then(res=>{
						that.$refs.uToast.show({
							type: "success",
							message: "激活成功",
							complete(){
								uni.navigateBack();
							}
						});
					}).catch(err=>{
						uni.$u.toast(err.msg);
					});
				}).catch(errors => {

				})
			},
			// 查看协议
			showAgree(e){
				that.agreeIndex = e,that.agreeShow = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.Active {
		min-height: 100vh;
		background-color: #45B9A2;
		.active_box {
			position: relative;
			.active_bg1{
				position: absolute;
				width: 94rpx;
				height: 186rpx;
				top: 182rpx;
				left: 0;
			}
			.active_bg2{
				position: absolute;
				width: 152rpx;
				height: 316rpx;
				top: 115rpx;
				right: 0;
			}
			.active_main{
				position: relative;
				z-index: 2;
				.active_title{
					font-size: 110rpx;
					font-family: FZCuQian-M17S;
					font-weight: 400;
					color: #05383A;
					line-height: 130rpx;
					text-align: center;
				}
				.active_sub{
					padding: 0 88rpx;
				}
				.active_card{
					position: relative;
					text-align: center;
					.active_card_img1{
						width: 722rpx;
						height: 464rpx;
					}
					.active_card_img2{
						width: 128rpx;
						height: 64rpx;
						position: absolute;
						z-index: 2;
						left: 200rpx;
						top: 120rpx;
					}
					.active_card_number{
						position: absolute;
						top: 130rpx;
						left: 360rpx;
						font-size: 24rpx;
						color: #BE8440;
						font-weight: bold;
						z-index: 3;
					}
					.active_card_app{
						position: absolute;
						top: 320rpx;
						left: 0;
						width: 100%;
						text-align: center;
						font-size: 48rpx;
						font-weight: bold;
						z-index: 2;
						color: #ffe4c9;
					}
				}
				.active_tip{
					font-size: 40rpx;
					color: #1E272E;
					font-weight: bold;
					line-height: 60rpx;
					margin-bottom: 60rpx;
				}
				.active_content{
					padding: 30rpx;
					.active_form{
						padding: 30rpx;
						background: #188E77;
						border-radius: 20rpx;
						margin-bottom: 30rpx;
						.active_form_input{
							height: 80rpx;
							background: #FFFFFF;
							border-radius: 16rpx;
							margin-bottom: 24rpx;
							padding: 0 30rpx;
						}
						.active_agree{
							padding: 30rpx 0 0;
							.active_agree_main{
								position: relative;
								.active_agree_dot{
									position: absolute;
									top: 0;
									left: 0;
									z-index: 2;
									width: 50rpx;
									height: 50rpx;
								}
								.active_agree_text{
									font-size: 26rpx;
									color: #FFFFFF;
									text{
										color: #0FBCF9;
									}
								}
							}
						}
					}
					.active_know{
						background: #188E77;
						box-shadow: 0rpx 11rpx 13rpx 0rpx rgba(255,255,255,0.13);
						border-radius: 20rpx;
						padding: 0 30rpx 30rpx;
						.active_know_title{
							padding: 30rpx 0;
							text{
								font-size: 36rpx;
								color: #FFE4C9;
								font-weight: 500;
								margin: 0 45rpx;
							}
						}
						.active_know_content{
							color: #FFFFFF;
							line-height: 40rpx;
							font-size: 28rpx;
						}
					}
				}
			}
		}
		.modal_scroll{
			max-height: 720rpx;
			overflow-y: scroll;
		}
	}
</style>
